<template>
  <div class="modal-overlay" @click="close">
    <div class="modal-content delete-confirm-modal" @click.stop>
      <div class="modal-header">
        <h3>确认删除</h3>
        <button class="modal-close" @click="close">×</button>
      </div>
      <div class="modal-body">
        <p>确定要删除以下索引吗？此操作不可恢复。</p>
        <ul class="delete-list">
          <li v-for="index in selectedIndices" :key="index">{{ index }}</li>
        </ul>
        <div class="confirm-actions">
          <button @click="close" class="btn btn-default">取消</button>
          <button @click="deleteSelectedIndices" class="btn btn-danger" :disabled="deletingIndices">
            <span v-if="deletingIndices">删除中...</span>
            <span v-else>确认删除</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeleteConfirmModal',
  props: {
    selectedIndices: {
      type: Array,
      default: () => []
    },
    deletingIndices: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('close');
    },
    deleteSelectedIndices() {
      this.$emit('delete-selected-indices');
    }
  }
}
</script>